<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <title>Document</title>
</head>
<body>
  <div class="box">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F53a7a8173503edb76b2f5e8757e34bc5a59c5dbb.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671532252&t=49bf43cd107221bacce17433343dd40d" alt="">
  </div>
  <div class="box">
    <img src="https://pic.rmb.bdstatic.com/95c95f4b6dbb42e3cace12174555a455.jpeg" alt="">
  </div>
  <div class="box">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F2d3f173aeb46fb4c0167cff271695d9640b69035.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671532252&t=392247bcc475ba808b1622cf47dd2db5" alt="">
  </div>
  <div class="box">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180121%2F8f237aa2e03b4e0bb2f9f5e91db7a15c.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671532252&t=fe1e6588d0b44f60506ab750f513ad7d" alt="">
  </div>
  <div class="box">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fthing_review%2Fl%2Fpublic%2F3662175.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671532252&t=8cef28a193b95642026a3a4cfb15eef2" alt="">
  </div>
  <div class="box">
    <img src="https://pics1.baidu.com/feed/314e251f95cad1c826d33d7e4de2750fc83d5165.jpeg?token=d61de80f3d0686ef2fe559e734b3aee8&s=BD80793355435B4D02645DDF030080A4" alt="">
  </div>
  <script>
    (function waterFall() {
      // 求出列数
      let box = $('.box')
      // 返回第一个box的宽度
      let boxWidth = box.width() 
      // 获取屏幕宽度
      let screenWidth = $(window).width()
      // 求出列数: 屏幕宽度 / 图片宽度 做取整
      let cols = parseInt(screenWidth / boxWidth)
      // 创建数组,存放高度
      let heightArr = []
      // 遍历图片, 除第一排不需要定位和取高度值,其他排定位处理
      $.each(box, function(index, item) {
        // 取出图片高度
        let boxHeight = $(item).height()
        // 判断是否是第一排
        if (index < cols) {
          // 第一排
          heightArr[index] = boxHeight
        } else {
          // 高度数组中最小值(高度最小的图片)
          let minBoxHeight = Math.min(...heightArr)
          // 高度最小的图片对应的索引
          let minBoxIndex = heightArr.indexOf(minBoxHeight)
          console.log('索引' , minBoxIndex);
          $(item).css({
            position: 'absolute',
            left: `${minBoxIndex * boxWidth}px`,
            top: `${minBoxHeight}px`
          })
          // 高度追加
          heightArr[minBoxIndex] += boxHeight
        }
        console.log(heightArr);
      }) 
      console.log(boxWidth);
    })() 
  </script>
</body>
</html>